<template>
  <v-form v-model="valid" ref="brandFrom">
    <v-stepper v-model="step">
      <v-stepper-header>
        <v-stepper-step :complete="step > 1" step="1">基本信息</v-stepper-step>
        <v-divider/>
        <v-stepper-step :complete="step > 2" step="2">商品描述</v-stepper-step>
        <v-divider/>
        <v-stepper-step :complete="step > 3" step="3">规格参数</v-stepper-step>
        <v-divider/>
        <v-stepper-step step="4">SKU属性</v-stepper-step>
      </v-stepper-header>
      <v-stepper-items>
        <v-stepper-content step="1">
          基本信息
        </v-stepper-content>
        <v-stepper-content step="2">
          商品描述
        </v-stepper-content>
        <v-stepper-content step="3">
          规格参数
        </v-stepper-content>
        <v-stepper-content step="4">
          SKU属性
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
    <v-cascader
      url="/item/category/list"
      required
      showAllLevels
      v-model="goods.categories"
      label="请选择商品分类"/>
    <!--品牌-->
    <v-select
      :items="brandOptions"
      item-text="name"
      item-value="id"
      label="所属品牌"
      v-model="goods.brandId"
      required
      autocomplete
      clearable
      dense chips
    />
    <v-text-field label="商品标题" v-model="goods.title" :counter="200" required />
    <v-text-field label="商品卖点" v-model="goods.subTitle" :counter="200"/>
    <v-text-field label="包装清单" v-model="goods.spuDetail.packingList" :counter="1000" multi-line :rows="3"/>
    <v-text-field label="售后服务" v-model="goods.spuDetail.afterService" :counter="1000" multi-line :rows="3"/>
    <quill-editor v-model="goods.spuDetail.description" :options="editorOption"/>
  </v-form>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  import {quillEditor} from 'vue-quill-editor'

  export default {
    name: "my-brand-form",
    props: {
      isEdit: {
        type: Boolean,
        default: false
      },
      step: {tye: Number, default: 1}

    },
    components: {
      quillEditor
    },
    data() {
      return {
        valid: false,//表单校验结果标记
        goods: {
          categories: {}, // 商品3级分类数组信息
          brandId: 0,// 品牌id信息
          title: '',// 标题
          subTitle: '',// 子标题
          spuDetail: {
            packingList: '',// 包装列表
            afterService: '',// 售后服务
          },
        },
        brandOptions: [],//品牌列表,
        editorOption: {},
        specifications:[] //规格参数


      }
    },

    methods: {},
    watch: {
      'goods.categories': {
        deep: true,
        handler(val) {
          // 判断商品分类是否存在，存在才查询
          if (val && val.length > 0) {
            // 根据分类查询品牌
            this.$http.get("/item/brand/cid/" + this.goods.categories[2].id)
              .then(({data}) => {
                this.brandOptions = data;
              })
            this.$http.get("/item/spec/groups/" + this.goods.categories[2].id)
              .then(({data})=>{
                this.specifications = data;
              })
          }

        }
      }
    }
  }
</script>

<style scoped>

</style>
